<html>
<head>
    <title>Demo using dojox.dtl._Templated</title>
    <script type="text/javascript" src="../../../dojo/dojo.js"
            djConfig="async: true, isDebug: true, parseOnLoad: true"></script>
    <script type="text/javascript">
        require(['dojox/dtl/ext-dojo/NodeList', 'dojox/dtl/Context', 'dojo/query', 'dojo/dom', 'dojo/parser', 'dojo/domReady!', 'dojox/dtl/tag/logic'], function (NodeList, Context, query, dom) {

                    // First, look at the NodeList extension
                    query(".fruit").dtl(require.toUrl("dojox/dtl/demos/templates/nodelist.html"), { items: ["apple", "banana", "pear"] });
                    query(".fruit2").dtl("<div><ul>{% for item in items %}<li>{{ item }}</li>{% endfor %}</ul></div", { items: ["apple", "banana", "pear"] });
                    // Now, create a real template object
                    var tpl = new dojox.dtl.Template(require.toUrl("dojox/dtl/demos/templates/nodelist.html"));
                    // And test its update function with a dojo.query
                    tpl.update(query(".update"), require.toUrl("dojox/dtl/demos/json/fruit.json"));
                    setTimeout(function () {
                        // And now test it with an ID reference
                        tpl.update("updateId", require.toUrl("dojox/dtl/demos/json/morefruit.json"));
                        // And throw in a standard rendering just for fun
                        dom.byId("updateId2").innerHTML = tpl.render(new dojox.dtl.Context({ items: ["pineapple", "orange", "tomato"] }));
                    }, 5000);
                });
    </script>
</head>
<body>
<div class="fruit"></div>
<div class="fruit2"></div>
<div class="update" id="updateId"></div>
<div class="update" id="updateId2"></div>
</body>
</html>
